<template>
  <div>
    <van-nav-bar title="新增"  @click-left="onClickLeft" @click-right="onClickRight" >
      <template #left>
        <van-icon name="arrow-left" />
      </template>

      <template #right>
        <span style="color: cornflowerblue">确定</span>
      </template>
    </van-nav-bar>

    <van-cell-group>
      <van-field v-model="value" label="提案人" placeholder="请输入用户名" />
      <van-field v-model="value" label="提案标题" placeholder="请输入用户名" />
      <van-field v-model="value" label="提案类别" placeholder="请输入用户名" />
      <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label="区域"
          placeholder="点击选择城市"
          @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
          v-model="message"
          rows="2"
          autosize
          label="提案描述"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
      />
      <van-field
          v-model="message"
          rows="2"
          autosize
          label="期望建议"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
      />

      <van-field name="uploader" label="上传照片">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
    </van-cell-group>


  </div>
</template>

<script>
import {Toast} from "vant";

export default {
  name: "Add",
  data() {
    return {
      value: '',
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home/work/suggest/index");
      Toast('返回');
    },
    onClickRight() {
      Toast('确定');
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
}
</script>

<style scoped>

</style>
